<script setup>
import { ref, onMounted } from 'vue'
import { Map, View } from 'ol'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import Feature from 'ol/Feature'
import Point from 'ol/geom/Point'
import { Style, Circle, Fill, Stroke } from 'ol/style'
import 'ol/ol.css'

const mapRef = ref(null)
const map = ref(null)
const vectorSource = ref(null) // 用于存储点的矢量数据源
const drawCount = ref(0) // 记录绘制的点数量

// 清除所有点的函数
const clearPoints = () => {
  if (vectorSource.value) {
    vectorSource.value.clear() // 清除所有矢量要素
    drawCount.value = 0 // 重置计数器
  }
}
//数据准备要在钩子外，地图的配置要写在钩子内
onMounted(() => {
  // 创建矢量数据源，用于存储用户绘制的点
  vectorSource.value = new VectorSource()
  
  // 创建矢量图层，用于显示用户绘制的点
  const vectorLayer = new VectorLayer({
    source: vectorSource.value,
    style: new Style({
      image: new Circle({
        radius: 8, // 点的半径
        fill: new Fill({
          color: 'rgba(255, 0, 0, 0.6)' // 点的填充颜色
        }),
        stroke: new Stroke({
          color: 'rgba(0, 0, 0, 0.8)', // 点的边框颜色
          width: 2 // 点的边框宽度
        })
      })
    })
  })
  
  // 初始化地图
  map.value = new Map({
    target: mapRef.value,
    layers: [
      new TileLayer({
        source: new XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
          crossOrigin: 'anonymous'
        })
      }),
      vectorLayer // 添加矢量图层到地图
    ],
    view: new View({
      center: [0, 0], // 地图中心坐标（经度，纬度）
      zoom: 5,       // 初始缩放级别
      projection: 'EPSG:4326' // 使用WGS84坐标系
    })
  })
  
  // 添加地图点击事件监听
  map.value.on('click', (event) => {
    // 获取点击位置的坐标
    const coordinate = event.coordinate
    
    // 创建点要素
    const pointFeature = new Feature({
      geometry: new Point(coordinate) // 使用点击位置创建点几何对象
    })
    
    // 将点要素添加到矢量数据源
    vectorSource.value.addFeature(pointFeature)
    
    // 增加计数器
    drawCount.value++
  })
})
</script>

<template>
  <div class="map-container">
    <h1>OpenLayers + Vue 3 地图演示</h1>
    
    <!-- 控制面板 -->
    <div class="control-panel">
      <span>已绘制 {{ drawCount }} 个点</span>
      <button @click="clearPoints" class="clear-btn">清除所有点</button>
    </div>
    
    <!-- 地图容器 -->
    <div ref="mapRef" class="map"></div>
    
    <!-- 使用说明 -->
    <div class="instructions">
      <p>点击地图添加点标记，点击"清除所有点"按钮删除所有标记</p>
    </div>
  </div>
</template>

<style scoped>
.map-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f5f5f5;
}

h1 {
  margin: 20px 0;
  color: #333;
  font-size: 1.8em;
}

.control-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin-bottom: 15px;
  padding: 10px 15px;
  background-color: white;
  border-radius: 6px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

.control-panel span {
  color: #555;
  font-weight: 500;
}

.clear-btn {
  padding: 8px 16px;
  background-color: #ff4757;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s;
}

.clear-btn:hover {
  background-color: #ff3742;
}

.map {
  width: 90%;
  height: 70vh;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-color: white;
}

.instructions {
  margin-top: 15px;
  color: #666;
  font-size: 14px;
}

.instructions p {
  margin: 0;
}
</style>
